<template>
	<view class="content" :style="{height:screenHeight+'px'}">
		<image class="logo" src="/static/logo.png" @click="goLogin"></image>
		<view class="text-area">
			<text class="title">居家照护平台</text>
		</view>
		<view class="form">
			<uni-forms :rules="rules" ref="form" :model="form">
				<uni-forms-item name="username" class="username" >
					<uni-easyinput type="text" v-model="form.username" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item name="passwordText">
					<uni-easyinput type="password" v-model="form.passwordText" placeholder="请输入密码" />
				</uni-forms-item>
				<uni-forms-item name="code">
					<template v-slot:default> 
						<view style="display: flex;justify-content: center; align-items: stretch;">
							<uni-easyinput class="code"  type="text" v-model="form.code" placeholder="请输入验证码" />
							<image class="codeImg" :src="codeImgUrl" @click="refreshCode"></image>
						</view>
					</template>
				</uni-forms-item>
				<!-- <view class="uni-column form-colum register-colum">
					<text @click="toRegister">去注册</text>
				</view> -->
				<view class="uni-column form-colum">
					<!-- <view class="othorLogin">
						<view class="othorLoginText">其他登录方式</view>
						<view class="othorLoginIcon"><uni-icons type="weixin" size="30" color="#999" @click="wxLogin"></uni-icons></view>
					</view> -->
					<view class="uni-form-item">
						<button class="subBtn" @click="formSubmit">登录</button>
						<!-- <button class="subBtn" open-type="getPhoneNumber" @getphonenumber="getphonenumber">微信授权手机号</button> -->
					</view>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script lang="ts">
	import { loginService } from '@/service/login/LoginService'
	import { StorageUtil } from '@/storage/StorageUtil'
	import { route } from "@/route/Route"
	import { encrypt } from "@/utils/Encryption"
	export default {
		data() {
			return {
				code:'',
				codeImgUrl: '',
				fusername:'aaa',
				fpassword:'',
				fcode:'',
				form:{
					username: '',
					password: '',
					passwordText: '',
					code: '',
					uuid: ''
				},
				rules: {
					username: {
						rules:[
							{
								required: true,
								errorMessage: '请填写手机号',
							},
							// 对name字段进行长度验证
							// {
							// 	minLength: 11,
							// 	maxLength: 11,
							// 	errorMessage: '请输入正确手机号',
							// },
							// {
							// 	validateFunction:function(rule,value,data,callback){
							// 		if (value.indexOf('1')!==0) {
							// 			callback('手机号格式不正确')
										
							// 			return false
							// 		}
							// 		return true
							// 	}
							// }
						],
						label:'手机号'
					},
					passwordText: {
						rules:[
							{
								required: true,
								errorMessage: '请填写密码',
							}
						],
						label:'密码'
					},
					code: {
						rules:[
							{
								required: true,
								errorMessage: '请填写验证码',
							}
						],
						label:'验证码'
					}
				},
				screenHeight:""
			}
		},
		onLoad() {
			let token = StorageUtil.getStorage(StorageUtil.TOKEN)
			if(token){
				route.reLaunchTo({name:'home'})
			}
			//一打开就请求code，解决第一次不能获取手机号
			// var that = this;
			// uni.login({
			// 	provider: 'weixin',
			// 	success(res) {
			// 		that.code = res.code;
			// 	}
			// })
			this.refreshCode()
			// #ifdef MP
			this.$nextTick(() => {
				 this.$refs.form.setRules(this.rules);
			 });
			// #endif
		},
		mounted() {
			this.screenHeight = uni.getSystemInfoSync().screenHeight
		},
		options: {
            styleIsolation: 'shared'
        },
		methods: {
			formSubmit() {
				console.log('fusername：', this.fusername);
				console.log('fpassword：', this.fpassword);
				console.log('fcode：', this.fcode);
				console.log('formSubmit1 this.form：', this.form);
				this.$refs.form.validate().then(res=>{
					this.form.password = encrypt(this.form.passwordText)
					loginService.login(this.form,(res)=>{
						StorageUtil.setStorage(StorageUtil.TOKEN,res.token)
						StorageUtil.setStorage(StorageUtil.USER_ID,res.userinfo.user.id)
						StorageUtil.setStorage(StorageUtil.USER,res)
						route.reLaunchTo({name:'home'})
					},(res)=>{
						
						uni.showToast({
							title: res.message,
							duration: 2000,
							icon:'error'
						});
						this.refreshCode()
					})
				}).catch(err =>{
					// console.log('表单错误信息：', err);
				})
			},
			
			formSubmit1() {
				console.log('fusername：', this.fusername);
				console.log('fpassword：', this.fpassword);
				console.log('fcode：', this.fcode);
				this.form.password = encrypt(this.fpassword)
				this.form.username = this.fusername
				this.form.code = this.fcode
				console.log('formSubmit1 this.form：', this.form);
				loginService.login(this.form,(res)=>{
					StorageUtil.setStorage(StorageUtil.TOKEN,res.token)
					StorageUtil.setStorage(StorageUtil.USER_ID,res.userinfo.user.id)
					StorageUtil.setStorage(StorageUtil.USER,res)
					route.reLaunchTo({name:'home'})
				},(res)=>{
					
					uni.showToast({
						title: res.message,
						duration: 2000,
						icon:'error'
					});
					this.refreshCode()
				})
			},
			// wxLogin(){
			// 	uni.login({
			// 	  provider: 'weixin',
			// 	  success: function (loginRes) {
			// 	    console.log(loginRes);
			// 		loginService.mpPageAuth(loginRes,(res)=>{
			// 			console.log(res)
			// 		})
			// 	  }
			// 	});
				
			// },
			getphonenumber(e){
				console.log(e.detail)
				console.log(this.code)
				// code: "34874f98527fb051d211145b2121e6764967e101c47e0b076b617c2c71d3c4a0"
				// encryptedData: "sLL+Tr3/8x7LXnX1z8GOsf4JepAYugz+LNv8HrBP4P5nrREpTrMWFDrny+X+/2lT5VjgerWPmbbNZ+d/QZflQqhkZ5LCszOnzCJ/9roiqa+dekLNgTZmHsswG/EiB5WdGeS5fsIEHeRSxsn+CzkMNOKi2KaxWKJ438WdZ5L/K8H7dgt73G9etlr+xHzE3s9+Eazf4Uy+l5ii//83M1M/Pw=="
				// errMsg: "getPhoneNumber:ok"
				// iv: "8XtTvEPUDUe72LGYc+YlIQ=="
				// return
				if (!e.detail.code) {
					uni.showToast({
						title:'获取手机号失败',
						icon:'none'
					})
					return;
				}
				var that = this;
				//验证code值是否过期
				uni.login({
					provider: 'weixin',
					success(res) {
						let code = res.code;
						var obj = {
							code,
							phoneCode: e.detail.code,
							iv:e.detail.iv,
							encryptedData:e.detail.encryptedData
						}
						that.decryptPhone(obj);
					}
				})

			},
			//解密手机号
			decryptPhone(obj){
				loginService.mpPageAuth(obj,(res)=>{
					console.log(res)
					StorageUtil.setStorage(StorageUtil.TOKEN,res.token)
					StorageUtil.setStorage(StorageUtil.USER_ID,res.userinfo.user.id)
					StorageUtil.setStorage(StorageUtil.USER,res)
					route.reLaunchTo({name:'home'})
				})
			},
			refreshCode(){
				loginService.code((res)=>{
					this.form.uuid = res.uuid
					this.codeImgUrl = res.img
				})
			},
			toRegister(){
				route.navigateTo({name:'register'})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: url('http://publicfile.cczhaohu.com:10311/20220826/jpeg-optimizer_qQjH202208098tW6225036406.png');
		background-size:100% 100%;
	}
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.title {
		color: $uni-text-color-inverse;
	}
	.form{
		width: 500rpx;
		margin-top: 50rpx;
		padding: 50rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		// background: rgba(250,250,250,0.6);
		backdrop-filter: blur(400rpx);
	}
	.register-colum{
		display: flex;
		flex-direction: column-reverse;
		padding: 0rpx 20rpx 20rpx 20rpx;
		text-align: end;
		color: $uni-text-color-grey;
	}
	.code{
		// width: 330rpx;
		// display: inline-block;
	}
	.codeImg{
		width: 200rpx;
		height: auto;
	}
	.othorLogin{
		color: $uni-text-color-grey;
		font-size: 0.777rem;
	}
	.othorLoginText{
		
	}
	.othorLoginIcon{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.subBtn{
		// width: 480rpx;
		font-size: 34rpx;
		background-color: $uni-color-primary;
		color: $uni-text-color-inverse;
		border-radius: 10rpx;
	}
	::v-deep.uni-easyinput__content{
		border-radius: 10rpx;
	}
	::v-deep.uni-input-placeholder{
		font-size: 26rpx;
	}
	::v-deep.uni-forms-item__label{
		display: none;
	}
</style>
